<template>
  <div class='index-page'>
    <!-- 顶部banner，介绍自己名字，职业 -->
    <div class="top-banner">
      <div class="msg-box">
        <p class="name">夏端</p>
        <my-line></my-line>
        <p class="class">web前端开发工程师</p>
        <div class="more">LEARN MORE</div>
      </div>
    </div>
    <!-- 中部关于自己 以及更多按钮,关于自己，自我介绍-->
    <div class="about-me">
      <div class="about-box">
        <p class="about-title">自我介绍</p>
        <my-line></my-line>
        <img src="@/static/images/index/head-pic.png" class="head-pic">
        <p class="my-des">本人从事web前端开发有2年多的时间，对于工作认真负责。一直坚信学习使人进步，养成一个良好的学习和生活习惯是一个人进步的前提。我有较强的责任心，并且热爱大前端，有着良好的代码编码风格、团队协作能力，能根据用户需求完成良好交互性和用户体验的功能。</p>
      </div>
    </div>

    <div class="production">
        <p class="production-title">作品展示</p>
        <my-line></my-line>
        <div class="production-list flex">
          <div class="production-item">
            <img src="@/static/images/index/dm.jpg" alt="">
          </div>
          <div class="production-item">
            <img src="@/static/images/index/gsl.jpg" alt="">
          </div>
          <div class="production-item">
            <img src="@/static/images/index/mmjmp.jpeg" alt="">
          </div>
          <div class="production-item">
            <img src="@/static/images/index/mmxc.jpeg" alt="">
          </div>
        </div>
    </div>
    <!-- 作品封面展示，列表形式展示 -->
  </div>
</template>
<script>
import myLine from '@/components/basic-com/line'
export default {
  components: {
    myLine
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped>
.top-banner {
  width: 100%;
  height: 18rem;
  background: url('../static/images/index/topban.jpg') no-repeat;
  background-size: 100% 100%;
  padding-top: 1px;
}
.msg-box {
  margin: 2rem auto 0;
  text-align: center;
}
.name {
  font-size: 1.8rem;
  font-weight: 500;
}
.class {
  font-size: 1.2rem;
  color: rgb(46, 46, 46);
  margin: 1rem 0;
}
.more {
  width: 8rem;
  font-size: .8rem;
  padding: .3rem .1rem;
  border: solid 1px #303030;
  margin: 0 auto;
}
.about-me {
  width: 100%;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
}
.about-box {
  width: 80%;
  text-align: center;
  margin: 0 auto;
}
.about-title {
  font-size: 1rem;
}
.head-pic {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  margin-top: 2rem;
}
.my-des {
  font-size: .8rem;
  line-height: 2;
  margin-top: 1rem;
  color: rgb(137 137 137);
}
.production {
  padding: 2rem 3rem;
  background: #F6F6F6;
  box-sizing: border-box;
}
.production-title {
  font-size: 1rem;
  text-align: center;
}

.production-list {
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.production-item {
  width: 48%;
  margin-bottom: .5rem;
  border: 1px solid #808080;
  border-radius: 8px;
  box-sizing: border-box;
}
.production-item>img {
  width: 100%;
  border-radius: 8px;
}
</style>
